<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Neuomeka Inventory Management">
    <link rel="shortcut icon" href="../static/img/favicon.png">
    <title>Neuromeka Inventory Management</title>
    <!-- Icons -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../static/css/simple-line-icons.css" rel="stylesheet">
    <!-- Premium Icons -->
    <link href="../static/css/glyphicons.css" rel="stylesheet">
    <link href="../static/css/glyphicons-filetypes.css" rel="stylesheet">
    <link href="../static/css/glyphicons-social.css" rel="stylesheet">
    <!-- Main styles for this application -->
    <link href="../static/css/style.css" rel="stylesheet">
    <!-- Jquery -->
    <script src="../static/js/libs/jquery.min.js"></script>
    <script src="../static/js/libs/moment-develop/moment.js"></script>
    <script src="../static/js/libs/Chart.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="col-lg-6">
        <label>Video Clip</label>
        <video id="clip" width="100%" controls loop muted autoplay></video>
        <div id="clip_msg"></div>
        <script type="text/javascript">
            $(document).ready(() => {
                load_clip();
                setInterval(load_clip, 30000);
                load_opdata();
                setInterval(load_opdata, 15000);
            });

            function load_clip() {
                console.log("Started Ajax");
                const sn = "{{ sn }}";
                $.ajax({
                    type: "GET",
                    url: "/clip/" + sn + "/check",
                    success: (res) => {
                        console.log("Res : " + res);
                        let video = document.getElementById("clip");
                        let msg = document.getElementById('clip_msg');
                        if (res === 'ready') {
                            video.style.display = 'block';
                            msg.style.display = 'none';
                            video.setAttribute('src', '/static/Chronograf.mp4');
                            console.log("Clip : ready");
                        } else if (res === 'ok') {
                            video.style.display = 'block';
                            msg.style.display = 'none';
                            video.setAttribute('poster', '/clip/poster');
                            video.setAttribute('src', '/clip/' + sn + '/1?ts=' + new Date().valueOf());
                            console.log(video);
                            console.log("Clip : ok");
                        } else {
                            $("#clip_msg").append("<p> Please, Refresh</p>");
                            video.style.display = 'block';
                            msg.style.display = 'block';
                            video.setAttribute('src', '{{ url_for('static', filename='img/bk.jpg') }}');
                            console.log("Blackbox load : %s", res);
                        }
                    },
                    error: (request, status, error) => {
                        let video = document.getElementById("black_box_clip");
                        let msg = document.getElementById("black_box_message");
                        video.style.display = 'none';
                        msg.style.display = 'block';
                        $('#clip_msg').append("<p>" + status + "</p>");
                        console.log("Load Black Box Fail " + request + status + error);
                    }
                });
            }

            // SSE 코드
            let ev_source = new EventSource("{{url_for('sse.stream')}}?channel={{sn}}_ev");
            ev_source.addEventListener('message', function (event) {
                $("#eventHistoryTable").DataTable().ajax.reload();
            }, false);
            ev_source.addEventListener('error', function (event) {
                //alert("Failed to connect to event stream");
            }, false);
        </script>
    </div>
    <div class="col-lg-6">
        <table id="dataTable" width="100%" class="table table-striped table-lightfont">
            <thead>
            <tr>
                <th>Idx</th>
                <th>Json</th>
                <th>File</th>
                <th>SN</th>
                <th>Time</th>
                <th>Down</th>
            </tr>
            </thead>
        </table>
        <script type="text/javascript">
            // $.fn.dataTable.ext.errMode = 'none';
            $(document).ready(function () {
                $('#dataTable').DataTable({
                    "processing": true,
                    "searching": false,
                    "paging": false,
                    "lengthChange": false,
                    ajax: {
                        "url": "/list/events/{{ sn }}",
                        "type": "GET",
                        "dataSrc": "",
                    },
                    columns: [
                        {"data": "idx"},
                        {"data": "json"},
                        {"data": "file"},
                        {"data": "sn"},
                        {"data": "occurrence_time"},
                        {"data": "down"}
                    ],
                    order: [[0, 'desc']]
                });
            });
        </script>
    </div>
</div>
<div class="container-fluid">
    <div class="col-md-6">
        <canvas id="myChart" width="600" height="300"></canvas>
    </div>
    <script type="text/javascript">
        function load_opdata() {
            $.ajax({
                url: "/opdata",
                dataType: "json"
            }).done(function (res) {

                let s1 = {
                    label: 's1',
                    data: res,
                    fill: true,
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132)",
                    borderWidth: 1
                };

                let cfg = {
                    type: 'line',
                    data: {datasets: [s1]},
                    options: {
                        scales: {
                            xAxes: [{
                                type: 'time',
                                distribution: 'series',
                                time: {
                                    parser: 'YYYY-MMM-D h:mm:ss:',
                                    unit: 'second'
                                },
                                ticks: {
                                    autoSkip: true,
                                    source: 'auto'
                                }
                            }],
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Closing price ($)'
                                }
                            }],
                            tooltips: {
                                intersect: false,
                                mode: 'index',
                                callbacks: {
                                    label: function (tooltipItem, myData) {
                                        var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        label += parseFloat(tooltipItem.value).toFixed(2);
                                        return label;
                                    }
                                }
                            }
                        }
                    }
                };

                let ctx = document.getElementById('myChart').getContext('2d');
                ctx.canvas.width = 1000;
                ctx.canvas.height = 600;
                let myChart = new Chart(ctx, cfg);
            });
        }
    </script>
    <div class="col-md-6">
        <canvas id="TTest" width="600" height="300"></canvas>
    </div>
    <script type="text/javascript">
        function randomNumber(min, max) {
            return Math.random() * (max - min) + min;
        }

        function randomBar(date, lastClose) {
            var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
            var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);
            return {
                t: date.valueOf(),
                y: close
            };
        }

        var dateFormat = 'MMMM DD YYYY';
        var date = moment('April 01 2017', dateFormat);
        var data = [randomBar(date, 30)];
        while (data.length < 60) {
            date = date.clone().add(1, 'd');
            if (date.isoWeekday() <= 5) {
                data.push(randomBar(date, data[data.length - 1].y));
            }
        }

        var ctx = document.getElementById('TTest').getContext('2d');
        ctx.canvas.width = 1000;
        ctx.canvas.height = 600;
        // console.log(data);

        var cfg = {
            type: 'bar',
            data: {
                datasets: [{
                    label: 'CHRT - Chart.js Corporation',
                    data: data,
                    type: 'line',
                    pointRadius: 0,
                    lineTension: 0,
                    fill: false,
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'time',
                        distribution: 'series',
                        ticks: {
                            source: 'data',
                            autoSkip: true
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Closing price ($)'
                        }
                    }]
                },
                tooltips: {
                    intersect: false,
                    mode: 'index',
                    callbacks: {
                        label: function (tooltipItem, myData) {
                            var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                            if (label) {
                                label += ': ';
                            }
                            label += parseFloat(tooltipItem.value).toFixed(2);
                            return label;
                        }
                    }
                }
            }
        };

        var chart = new Chart(ctx, cfg);

        /*document.getElementById('update').addEventListener('click', function () {
            var type = document.getElementById('type').value;
            chart.config.data.datasets[0].type = type;
            chart.update();
        });*/
    </script>
</div>

</body>


<!-- Bootstrap and necessary plugins -->
<script src="../static/js/libs/tether.min.js"></script>
<script src="../static/js/libs/bootstrap.min.js"></script>
<script src="../static/js/libs/pace.min.js"></script>

<!-- GenesisUI main scripts -->
<script src="../static/js/app.js"></script>

<!-- Plugins and scripts required by this views -->
<script src="../static/js/libs/toastr.min.js"></script>
<script src="../static/js/libs/gauge.min.js"></script>
<script src="../static/js/libs/daterangepicker.js"></script>
<script type="text/javascript" src="../static/js/libs/DataTable_Bootstrap4/datatables.min.js"></script>

<!-- Custom scripts required by this view -->
{#<script src="../static/js/views/main.js"></script>#}

</html>